<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .table {
            display: table;
            width: 100%;
            text-align: center;
        }
        .table-header {
            display: table-row;
            background: #4caf50;
        }
        .table-header-cell {
            display: table-cell;
            font-size: 1.2em;
            padding: 5px;
        }
        .table-row {
            display: table-row;

        }
        .table-cell {
            display: table-cell;
            padding: 5px;
        }
        .table-row:hover {
            background-color: #f2f2f2;
        }
        /*.table1-row:nth-child(odd) {
            background-color: #f2f2f2;
        }*/
    </style>
</head>
<body>
<div>
    <h2>display-table</h2>
    <p>
        相比HTML table标签，基于div容器+display属性的CSS table渲染方式，在多层嵌套渲染时效率高；渲染非表格数据内容(登录)无语义冲突；
        HTML table标签按整体渲染后加载到dom节点，CSS table方式会逐条渲染。
        <br>
        同样，row padding需声明在cell
    </p>
    <div>
        <div style="display: table">
            <div style="display: table-row">
                <div style="display:table-row">
                    <div style="display: table-cell">
                        table/inline-table
                    </div>
                    <div style="display: table-cell">
                        &lt;table&gt;
                    </div>
                </div>
                <div style="display:table-row">
                    <div style="display: table-cell">
                        table-header-group <br>
                        table-row-group<br>
                        table-footer-group<br>
                    </div>
                    <div style="display: table-cell">
                        &lt;thead&gt;<br>
                        &lt;tbody&gt;<br>
                        &lt;tfoot&gt;<br>
                    </div>
                </div>
                <div style="display:table-row">
                    <div style="display: table-cell">
                        table-row
                    </div>
                    <div style="display: table-cell">
                        &lt;tr&gt;
                    </div>
                </div>
                <div style="display:table-row">
                    <div style="display: table-cell">
                        table-cell
                    </div>
                    <div style="display: table-cell">
                        &lt;td&gt;/&lt;th&gt;
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="table">
    <div class="table-header">
        <div class="table-header-cell">Firstname</div>
        <div class="table-header-cell">Lastname</div>
        <div class="table-header-cell">Savings</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Peter</div>
        <div class="table-cell">Griffin</div>
        <div class="table-cell">$100</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Lois</div>
        <div class="table-cell">Griffin</div>
        <div class="table-cell">$150</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Joe</div>
        <div class="table-cell">Swanson</div>
        <div class="table-cell">$300</div>
    </div>
    <div class="table-row">
        <div class="table-cell">Cleveland</div>
        <div class="table-cell">Brown</div>
        <div class="table-cell">$250</div>
    </div>
</div>
</body>
</html>